import React from 'react';
import { ListView, Icon, Badge } from 'antd-mobile';
import styles from './billList.css';

import BillItem from '../billItem/billItem';

const BillList = ({
  loading,
  list=[],
  onViewMember = () => {},
  onPagination = () => {},
  showLimit = () => {}
}) => {

  // console.log('list',JSON.stringify(list[1]));

  const dataSource = new ListView.DataSource({
    rowHasChanged: (row1, row2) => row1 !== row2,
  });

  const separator = (sectionID, rowID) => (
      <div key={`${sectionID}-${rowID}`} className={styles.separator} />
    );

  const row = (item) => {

    const itemPros = {
      item,
      onViewMember,
      onPagination,
      showLimit,
    }

    return <BillItem {...itemPros}/>
  };

  const loadView = () => {
    if(loading){
      return (
        <div style={{ padding: 17, textAlign: 'center' }}>
          加载中...
        </div>
      )
    }else{

      if(list && JSON.stringify(list) != '{}' && JSON.stringify(list) != '[]'){
        return '';//加载完成
      }else{
        return (
          <div style={{ padding: 17, textAlign: 'center' }}>
            暂无信息
          </div>
        )
      }

    }

  }

  const loaded = () =>{
    // console.log('list',JSON.stringify(list));
    if(list && JSON.stringify(list) != '{}' && JSON.stringify(list) != '[]'){
      return '加载完成';
    }else{
      return '暂无信息';
    }
  }


  return (
    <div className={styles.normal}>
      <ListView
        dataSource={dataSource.cloneWithRows(list)}
        renderFooter={() => loadView()}
        renderRow={row}
        renderSeparator={separator}
        pageSize={4}
        useBodyScroll
        onScroll={() => { }}
        scrollRenderAheadDistance={500}
        scrollEventThrottle={200}
        onEndReachedThreshold={10}
        onEndReached={() => onPagination()}
      />
    </div>
  );
};

export default BillList;
